<template>
    <div class="box">
      <header class="header">
        <van-nav-bar
          title="注册"
          left-arrow
          @click-left="$router.back()"
        />
      </header>
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="username"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
           <van-field
            v-model="tel"
            type="text"
            name="tel"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="code"
            name="code"
            center
            clearable
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button size="small" type="danger" native-type="button" :disabled="telFlag" @click="sendCode">{{ msg }}</van-button>
            </template>
          </van-field>
          <van-field
            v-model="password"
            :type="type"
            name="password"
            placeholder="请输入8-20位登录密码"
            :right-icon="rightIcon"
            @click-right-icon="changeIcon"
            :rules="[{ required: true, message: '请输入8-20位登录密码' }]"
            clearable
          />
          <div style="margin: 16px;">
            <van-button :disabled="!flag" round block type="danger" native-type="submit">
            注册
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Form, Field, Button, NavBar, Toast } from 'vant'
import { senCode, register } from '@/api'
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      tel: '',
      code: '',
      password: '',
      adminCode: '',
      regPhone: /^[1][3,4,5,7,8][0-9]{9}$/,
      regPwd: /^[0-9A-Za-z]{8,20}$/,
      type: 'password',
      rightIcon: 'closed-eye',
      timer: null,
      msg: '发送验证码',
      time: 10
    }
  },
  methods: {
    changeIcon () {
      if (this.type === 'password') {
        this.rightIcon = 'eye-o'
        this.type = 'text'
      } else {
        this.rightIcon = 'closed-eye'
        this.type = 'password'
      }
    },
    onSubmit (content) {
      if (content.code * 1 !== this.adminCode) {
        Toast('验证码输入错误')
      } else {
        register(content).then(res => {
          switch (res.data.code) {
            case '10001':
              Toast('该手机号已被注册')
              break
            case '10003':
              Toast('该用户名已被注册')
              break
            case '200':
              Toast('注册成功')
              this.$router.replace('/login')
              break
          }
        })
      }
    },
    sendCode () {
      this.timer = setInterval(() => {
        this.time--
        if (this.time === 0) {
          this.msg = '发送验证码'
          clearInterval(this.timer)
          this.time = 10
        } else {
          this.msg = this.time + 's后重新发送'
        }
      }, 1000)
      senCode({
        tel: this.tel
      }).then(res => {
        switch (res.data.code) {
          case '10001':
            Toast('手机号已被注册')
            break
          case '10002':
            Toast('短信发送失败,请重新发送')
            break
          case '200':
            Toast('短信已发送,请查收')
            this.adminCode = res.data.telCode
            break
        }
      })
    }
  },
  computed: {
    telFlag () {
      if (this.tel.length !== 11 || this.msg !== '发送验证码') {
        return true
      } else {
        return false
      }
    },
    flag () {
      if (this.username.length >= 2 && this.regPhone.test(this.tel) && this.code !== '' && this.password.length >= 8 && this.password.length <= 20 && this.regPwd.test(this.password)) {
        return true
      } else {
        return false
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.content{
  padding-top: 100px;
  background: #fff;
}
</style>
